<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Building Online</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="mobile-web-app-capable" content="yes">
	<link rel="stylesheet" href="../css/semantic.min.css">
	<link rel="stylesheet" href="../css/icon.css">
	<link rel="stylesheet" href="../css/global.css">
	<script type="text/javascript" src="../js/libs/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="../js/libs/semantic.min.js"></script>
</head>
<body>
	<div class="ui container segment fluid" style="min-height: 68px;background: #f6f6f6;"></div>
	<div class="ui container">
		<div class="f-left"><img src="../images/bd-logo.svg" class="ui image" style="height: 70px;" alt=""></div>
		<div class="f-right" >
			<div class="mb-10">
				<a href="#" class="fs-14">REGISTER</a> |
				<a href="#" class="fs-14">SUBSCRIBE</a> |
				<a href="#" class="fs-14">SIGN IN</a>
			</div>
			<div class="ui icon input">
				<i class="search link icon"></i>
				<input type="text" placeholder="Search our site">
			</div>
		</div>
	</div>
	<div style="clear: both"></div>
	<div class="ui container fluid mt-20">
		<div class="ui menu" style="font-size:smaller;">
			<div class="ui container">
				<div class="item brand">
					<i class="home icon orange large"></i>
				</div>
				<div class="active item">NEWS</div>
				<div class="item">COMMENT</div>
				<div class="item">BUILDINGS</div>
				<div class="item">TECHNICAL</div>
				<div class="item">BUSINESS</div>
				<div class="item">BRIEFING</div>
				<div class="item">JOBS</div>
				<div class="item">MORE</div>
			</div>
		</div>
	</div>
	<div class="ui main container mt-70">
		<h1 class="ui header dividing">
			模仿BuidlingOnline导航栏
			<div class="sub header">这是英国一个著名的建筑网站</div>
		</h1>
		<div class="ui segment basic">
			<p>由于 semanticUI 中的菜单组织方式尚未考虑 BD 这样更加复杂的组合方式——实际上也没必要，因此在实现时调用了一些自己定义的 css 类，比如：f-left(左浮动)、 f-right(右浮动)等。</p>
			<p>另外，由于自己编译的 semanticUI 中对菜单栏的文字字号定义较大，不适合于 BD 网站的风格，所以在这里实现时在菜单栏外包裹时添加了 <span class="ui label">style="font-size:smaller;"</span></p>
		</div>
	</div>
</body>
</html>